<template>
  <div class="content">
    <div class="topbg">
      <div class="toper">
        <div class="back" @click="$router.back()">
          <van-icon name="arrow-left" color="#fff" size="24px" />
        </div>
      </div>
      <div class="topbg-title">
        <h1>{{proTitle}}</h1>
        <p>{{prodesc}}</p>
        <b>{{proprice}}</b>
      </div>
    </div>
    <div class="content-nav">
      <div class="content-title">
        <van-tabs type="card">
          <van-tab title="黑色" class="tab-b">
            <div class="content-swip content-swip1">
              <van-swipe @change="onChange" style="width:306px;margin-left:40px;!import">
                <van-swipe-item style="width:280px;">
                  <van-card
                    price="1.00"
                    desc="描述信息"
                    title="商品标题"
                    thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                  >
                    <template #footer>
                      <van-button size="mini">立即购买</van-button>
                    </template>
                  </van-card>
                </van-swipe-item>
                <!-- <van-swipe-item style="width:280px;">
                  <van-card
                      price="2.00"
                      desc="描述信息"
                      title="商品标题"
                      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                    />
                </van-swipe-item>
                <van-swipe-item style="width:306px;!import">
                  <van-card
                    price="3.00"
                    desc="描述信息"
                    title="商品标题"
                    thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                  />
                </van-swipe-item>
                <van-swipe-item style="width:306px;!import">
                  <van-card
                    price="4.00"
                    desc="描述信息"
                    title="商品标题"
                    thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                  />
                </van-swipe-item>-->
              </van-swipe>
            </div>
          </van-tab>
          <van-tab title="红色" class="tab-r" style="width:306px;margin-left:40px;!import">
            <van-swipe @change="onChange">
              <van-swipe-item style="width:280px;">
                <van-card
                  price="2.00"
                  desc="描述信息"
                  title="商品标题"
                  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                >
                  <template #footer>
                    <van-button size="mini">立即购买</van-button>
                  </template>
                </van-card>
              </van-swipe-item>
              <!-- <van-swipe-item>
                <van-card
                  price="3.00"
                  desc="描述信息"
                  title="商品标题"
                  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                />
              </van-swipe-item>
              <van-swipe-item>
                <van-card
                  price="4.00"
                  desc="描述信息"
                  title="商品标题"
                  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                />
              </van-swipe-item> -->
            </van-swipe>
          </van-tab>
          <van-tab title="白色" class="tab-w" style="width:306px;margin-left:40px;!import">
            <van-swipe @change="onChange">
              <!-- <van-swipe-item style="width:280px;">
                <van-card
                  price="2.00"
                  desc="描述信息"
                  title="商品标题"
                  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                />
              </van-swipe-item> -->
              <van-swipe-item>
                <van-card
                  price="3.00"
                  desc="描述信息"
                  title="商品标题"
                  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                >
                <template #footer>
                  <van-button size="mini">立即购买</van-button>
                </template>
                </van-card>
              </van-swipe-item>
              <!-- <van-swipe-item>
                <van-card
                  price="4.00"
                  desc="描述信息"
                  title="商品标题"
                  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                />
              </van-swipe-item> -->
            </van-swipe>
          </van-tab>
          <van-tab title="金色" class="tab-g" style="width:306px;margin-left:40px;!import">
             <van-swipe @change="onChange">
              <!--<van-swipe-item style="width:280px;">
                <van-card
                  price="2.00"
                  desc="描述信息"
                  title="商品标题"
                  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                />
              </van-swipe-item>
              <van-swipe-item>
                <van-card
                  price="3.00"
                  desc="描述信息"
                  title="商品标题"
                  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                />
              </van-swipe-item> -->
              <van-swipe-item>
                <van-card
                  price="4.00"
                  desc="描述信息"
                  title="商品标题"
                  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                >
                <template #footer>
                  <van-button size="mini">立即购买</van-button>
                </template>
                </van-card>
              </van-swipe-item>
            </van-swipe>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="content-action">
      <p><span></span>查看更多 ></p>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs, Card, Swipe, SwipeItem, ActionSheet, SwipeCell, Button, Lazyload } from 'vant'

Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Card)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(ActionSheet)
Vue.use(SwipeCell)
Vue.use(Button)
Vue.use(Lazyload)

export default {
  data () {
    return {
      proTitle: '真空魔法保温杯',
      prodesc: '反正买了不吃亏，实用就完事~',
      proprice: '￥90.00'
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.topbg{
  width:100%;
  height:3.6rem;
  background:url('../../../public/images/u371.jpg');
  background-size: 100% 100%;
  // background-position-y:-20px;
  .toper{
    padding: 0.1rem 0.1rem;
    .back{
      width:0.4rem;
      height:0.4rem;
      border-radius: 50%;
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .topbg-title{
    color:#fff;
    margin-left: 0.2rem;
    padding-top:0.4rem;
    p{
      line-height:24px;
    }
    b{
      line-height: 60px;
      font-size: 18px;
      font-weight: 800;
    }
  }
}
.content-nav {
  display:flex;
  position:relative;
  top: -30px;
  .content-title{
    /deep/.van-tabs__nav--card{
      border:none;
      background:rgba(0, 0, 0, 0.8);
      border-radius: 4px;
      /deep/.van-tab{
        width: 68px;
        border:none;
        color: #fff;
        .content-swip{
          width:100%;
          overflow:hidden;
          /deep/.van-swipe__track{
            .van-swipe-item{
              width:280px;
              .van-card {
                width:260px;
              }
            }
          }
        }
      }
    }
  }
}
  .content-action{
  height: 900px;
  overflow:auto;
  background:url('../../../public/images/u390.jpg');
  p{
    font-size: 16px;
    color:#666;
    span{
      display:inline-block;
      width:14px;
      height:14px;
      border-radius:50%;
      background-color:#000;
      margin:0 16px;
    }
  }
}
</style>
